<template>
  <div class="addemp">
    <el-dialog
              title="新增员工"
              :visible.sync="dialogVisible"
              width="400px"

            >
              <el-form  :data="addfrom">
                <el-form-item label="*账号" :label-width="formLabelWidth">
                  <el-input
                    v-model="addfrom.username"
                    style="width: 200px"
                    placeholder="请输入账号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="*员工姓名" :label-width="formLabelWidth">
                  <el-input
                    v-model="addfrom.name"
                    style="width: 200px"
                    placeholder="请输入员工姓名"
                  ></el-input>
                </el-form-item>

                <el-form-item label="*手机号" :label-width="formLabelWidth">
                  <el-input
                    v-model="addfrom.phone"
                    style="width: 200px"
                    placeholder="请输手机号"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="*性别"
                  :label-width="formLabelWidth"
                  style="width: 200px;"

                  >
                  <div  class="radiox" >
                    <el-radio-group v-model="addfrom.sex" v-removeAriaHidden>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>

                  </el-radio-group>

                  </div>
                   </el-form-item>

                <el-form-item   label="身份证号" :label-width="formLabelWidth" style="width: 280px">

                  <el-input v-model="addfrom.idNumber" placeholder="身份证">

                  </el-input>
                </el-form-item>
                <div style="padding-top: 10px;width:330px" >

                  <el-button @click="savehandler(addfrom)"
                    style="margin-left: 60px; width: 80px"
                    type="primary"
                    >保存</el-button
                  >
                  <el-button @click="cancel" style="margin-left: 100px; width: 80px" type="info"
                    >取消</el-button
                  >
                </div>
              </el-form>
   </el-dialog>
  </div>
</template>

<script>
import Bus1 from '@/utils/EventBus'
import { addemp } from '@/api/emp'

export default {
  name: 'addempIndex',
  data () {
    return {

      addfrom: {
        id: '',
        username: '',

        name: '',
        phone: '',
        sex: 1,
        idNumber: ''
      }, // 弹窗数据

      fileList: [],
      dialogVisible: false,
      formLabelWidth: '80px',

      deptName: [] // 获取所有部门名称
    }
  },
  created () {
    /* 发送弹窗开关 */
    Bus1.$on('sendMsg1', (dialogVisible) => {
      this.dialogVisible = dialogVisible
    })
  },
  /* 关闭对话 */
  beforeDestroy () {
    Bus1.$off('sendMsg1')
  },
  methods: {
    async savehandler (addfrom) {
      if (addfrom.username === '') {
        this.$message.error('用户名不能为空')
        return
      } if (!(addfrom.username.length > 0 && addfrom.username.length < 20)) {
        this.$message.error('用户名数量不能超过20')
        return
      }
      if (addfrom.phone.length !== 11) {
        this.$message.error('手机号位位数不对')
        return
      }

      if (addfrom.idNumber.length !== 18) {
        this.$message.error('身份证位数不对')
        return
      }

      const res = await addemp(addfrom)
      console.log(res.data)
      location.reload()// 刷新
    },

    // 取消
    cancel () {
      this.dialogVisible = false
      this.addfrom = ''
    }

  }

}
</script>

<style lang="less" secped>

  .avatar {
    width: 100px;
    height: 100px;

    display: block;
  }
 /deep/ .el-button.el-button--info{
    margin-left:10%;
}
.radiox{
  padding-left: 8px;
}

</style>
